<template>
	<view class="main">
		<header-vue :back="true" title="发票详情"></header-vue>
		<view class="bg-box"></view>
		<view class="list">
			<view class="status">
				<view class="font40 fontbold-500">已完成</view>
				<view class="flex start font24" style="margin-top: 12rpx;">
					<i class="iconfont icon-clock"></i>
					期待下次为您服务！
				</view>
			</view>
			<view class="white-box">
				<view class="flex form-item start font28">
					<view class="color-666">发票类型：</view>
					<view>电子发票</view>
				</view>
				<view class="flex form-item start font28">
					<view class="color-666">发票内容：</view>
					<view>*服务名称*价格信息</view>
				</view>
				<view class="flex form-item start font28">
					<view class="color-666">抬头类型：</view>
					<view>个人</view>
				</view>
				<view class="flex form-item start font28">
					<view class="color-666">开票金额：</view>
					<view>498.00</view>
				</view>
				<view class="flex form-item start font28">
					<view class="color-666">开票时间：</view>
					<view>2025-06-12 11:34:11</view>
				</view>
				<view class="flex form-item start font28">
					<view class="color-666">申请时间：</view>
					<view>2025-06-12 11:34:11</view>
				</view>
				<view class="flex form-item start font28">
					<view class="color-666">申请方式：</view>
					<view>发送邮箱</view>
				</view>
			</view>
			<view class="white-box">
				<view class="flex between arrimg">
					<view>
						<image v-for="item in 4" src="/static/login/bg.png"></image>
					</view>
					<view class="flex column between" style="height: 100rpx;align-items: flex-end;">
						<view class="flex price fontbold-500">
							<text class="font24">￥</text>
							<text class="font28">45</text>
						</view>
						<view class="font24 color-666" style="margin-right: 0;">X6</view>
					</view>
				</view>
				<view class="flex between form-item start font28">
					<view class="color-666">订单状态</view>
					<view>已完成</view>
				</view>
				<view class="flex between form-item start font28">
					<view class="color-666">订单编号</view>
					<view>DD70058687923622</view>
				</view>
				<view class="flex between form-item start font28">
					<view class="color-666">下单时间</view>
					<view>2025-06-12 11:34:11</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../views/shop/components/numBox.vue'
	import {
		searchApi
	} from '../../api/modules/shop'

	export default {
		data() {
			return {
				params: {
					keyword: ''
				},
				tabIndex: 0,
				value: '',
				showModal: false
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.status {
			margin: 28rpx 0;
		}
	}

	.color-gold {
		color: #DF9824 !important;
	}

	.icon-clock {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}

	.bg-box {
		height: 400rpx;
		background: linear-gradient(to bottom, #F3FAFF 0%, rgba(243, 250, 255, 0) 100%) !important;
		position: absolute;
		width: 100vw;
		left: 0;
		z-index: 0;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		padding: 0 28rpx 16rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;

		.item {
			padding-bottom: 28rpx;
		}

		.color-666 {
			color: $uni-text-color-grey1;
			margin-right: 40rpx;
		}
		
		.form-item {
			padding: 28rpx 0 12rpx 0;
			box-sizing: border-box;
		}
		
		.price {
			color: #333333;
			align-items: baseline;
		}
		
		.arrimg {
			padding: 28rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #DDDDDD;
			
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>